<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>词汇-单词</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <style type="text/css">
        #words-page-header{
            margin: auto;
        }
    </style>

    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

</head>
<body>
    <div id="words">
        <header class="navbar navbar-static-top bs-docs-nav" id="top" role="navigation">
            <div class="navbar navbar-inverse">
                <div class="navbar-header">
                    <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a href="../../index.html" class="navbar-brand ">考研词汇</a>
                </div>
                <nav id="bs-navbar" class="collapse navbar-collapse">
                    <ul class="nav navbar-nav">
                        <li>
                            <a href="../search/search.html" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', '搜索'])">搜索</a>
                        </li>
                        <li class="active" >
                            <a href="../words/words.html" onclick="_hmt.push(['_trackEvent', 'docv3-navbar', 'click', '单词'])">单词</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>


        <!--搜索-->
        <div class="page-header " id="words-page-header">
            <div class="container">
                <div class="input-group input-group-lg">
                    <input type="text" class="form-control " placeholder="Search for...">
                    <span class="input-group-btn">
                            <button type="button" class="btn btn-primary">搜&nbsp;&nbsp;索</button>
                        </span>
                </div>
            </div>
            <!--这是调整高度-->
            <h1 class="input-sm"></h1>
        </div>

        <div class="jumbotron container">
            <table class="table table-hover">
                <tr @click="queryWordsDetail()">
                    <th scope="row">1</th>
                    <td>a</td>
                    <td>添加</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>abandon</td>
                    <td>删除</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>abdomen</td>
                    <td>添加</td>
                </tr>
            </table>
        </div>
    </div>

    <!--单词意思-->
    <div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="words-detail">

        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">翻译意思</h4>
                </div>
                <div class="modal-body">
                    <div class="jumbotron container col-xs-12">
                        <p>word</p>
                        <ul>
                            <li>n.单词； 话语； 诺言； 消息</li>
                            <li>vt.措辞，用词； 用言语表达；</li>
                            <li>vi.讲话；</li>
                        </ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>

    </div>

    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<script type="text/javascript">
    var words = new Vue({
        el:'#words',
        data:{
            test:1234,
        },
        created: function(){
            $('#words-detail').on('shown.bs.modal', function (e) {
                // 关键代码，如没将modal设置为 block，则$modala_dialog.height() 为零
                $(this).css('display', 'block');
                var modalHeight=$(window).height() / 2 - $('#youModel .modal-dialog').height() / 2;
                $(this).find('.modal-dialog').css({
                    'margin-top': modalHeight
                });
            });
        },
        methods:{
            queryWordsDetail:function() {
                $('#words-detail').modal({
                    keyboard: false
                })
            },
        },
    })
</script>
</body>
</html>